<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楚地灵韵 - AR导览</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <div class="header-content">
                <div class="logo">楚地灵韵</div>
                <div class="header-icons">
                    <div class="icon-button">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="icon-button">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
            </div>
        </header>

        <div class="app-content">
            <div class="ar-guide-container">
                <!-- Map for navigation -->
                <div class="map-container">
                    <!-- Map placeholder -->
                    <img src="https://placehold.co/500x300/f0f0f0/909090?text=景区地图" style="width: 100%; height: 100%; object-fit: cover;">
                </div>

                <!-- Map overlay controls -->
                <div class="map-overlay">
                    <i class="fas fa-location-arrow"></i>
                    <span>我的位置</span>
                </div>

                <!-- AR mode button -->
                <button class="ar-mode-button">
                    <i class="fas fa-vr-cardboard"></i>
                    进入AR导览模式
                </button>
            </div>

            <!-- Nearby attractions -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2 class="module-title">附近景点</h2>
                    <div class="view-all">
                        更多 <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="scroll-cards">
                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=景点1" alt="景点图片">
                            <div class="card-badge">
                                <i class="fas fa-star"></i> 4.8
                            </div>
                        </div>
                        <div class="card-info">
                            <h3>湘绣博物馆</h3>
                            <div class="location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>距离 300m</span>
                            </div>
                            <div class="tags">
                                <span class="tag">非遗</span>
                                <span class="tag">博物馆</span>
                            </div>
                        </div>
                    </div>

                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=景点2" alt="景点图片">
                            <div class="card-badge">
                                <i class="fas fa-star"></i> 4.6
                            </div>
                        </div>
                        <div class="card-info">
                            <h3>楚王陵</h3>
                            <div class="location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>距离 500m</span>
                            </div>
                            <div class="tags">
                                <span class="tag">文物</span>
                                <span class="tag">古迹</span>
                            </div>
                        </div>
                    </div>

                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=景点3" alt="景点图片">
                            <div class="card-badge">
                                <i class="fas fa-star"></i> 4.9
                            </div>
                        </div>
                        <div class="card-info">
                            <h3>屈子祠</h3>
                            <div class="location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>距离 800m</span>
                            </div>
                            <div class="tags">
                                <span class="tag">名人</span>
                                <span class="tag">古迹</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tour guide options -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2 class="module-title">推荐导览路线</h2>
                    <div class="view-all">
                        更多 <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="activity-list">
                    <div class="activity-card">
                        <div class="activity-time">
                            <span class="date">约</span>
                            <span class="day">2h</span>
                        </div>
                        <div class="activity-details">
                            <h3>楚文化精华半日游</h3>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>起点: 博物馆入口</span>
                            </div>
                            <div class="activity-description">
                                探索湖南楚文化的精髓，了解楚国历史与艺术，体验非遗工艺制作。
                            </div>
                        </div>
                    </div>

                    <div class="activity-card">
                        <div class="activity-time">
                            <span class="date">约</span>
                            <span class="day">3h</span>
                        </div>
                        <div class="activity-details">
                            <h3>屈原诗歌寻踪之旅</h3>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>起点: 屈子祠</span>
                            </div>
                            <div class="activity-description">
                                追寻屈原足迹，感受《离骚》意境，欣赏楚辞文化精华。
                            </div>
                        </div>
                    </div>

                    <div class="activity-card">
                        <div class="activity-time">
                            <span class="date">约</span>
                            <span class="day">4h</span>
                        </div>
                        <div class="activity-details">
                            <h3>楚地全景文化探索</h3>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>起点: 游客中心</span>
                            </div>
                            <div class="activity-description">
                                全方位了解楚文化遗产，包括青铜器、丝绸艺术、古建筑和传统民俗活动。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Spirit guides -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2 class="module-title">灵韵向导</h2>
                </div>
                
                <div class="spirit-collection">
                    <div class="spirit-avatar">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=屈原" alt="屈原">
                        <span class="spirit-name">屈原</span>
                    </div>
                    
                    <div class="spirit-avatar">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=楚王" alt="楚王">
                        <span class="spirit-name">楚王</span>
                    </div>
                    
                    <div class="spirit-avatar locked">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=?" alt="未解锁">
                        <span class="spirit-name">未解锁</span>
                    </div>
                    
                    <div class="spirit-avatar locked">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=?" alt="未解锁">
                        <span class="spirit-name">未解锁</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom navigation -->
        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item active">
                <i class="fas fa-map-marked-alt"></i>
                <span>导览</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-qrcode"></i>
                <span>扫一扫</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-ghost"></i>
                <span>灵韵</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- Floating AR scan button -->
        <div class="fab">
            <i class="fas fa-camera"></i>
        </div>
    </div>
</body>
</html> 